<template>
    <!-- 带返回按钮头部 -->
    <div class="backHeader">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #title>
                <div class="backHeader-title">
                    <p class="font-36 font-600">{{ title }}</p>
                </div>
            </template>
            <template #right>
                <slot name="right"></slot>
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
export default {
    props: {
        backPath: {
            type: String,
            default: ''
        },
        title:{
            type:String,
            default:''
        },
        fn:{
            type:[Function,null],
            default:null
        }
    },
    data() {
        return {

        }
    },
    methods: {
        onClickLeft() {
            if (this.backPath) {
                this.$router.push(this.backPath);
            }else if(this.fn instanceof Function){
                this.fn();
            }else if(window.history.length > 1){
                this.$router.go(-1);
            }else{
                this.$router.push('/');
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.backHeader{
    width: 100%;
    height: 100px;
    .backHeader-title{
        color: #fff;
    }
    ::v-deep .van-nav-bar{
        background-color: #171A1E !important;
        width: 100%;
        height: 100px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        &::after{
            border: none !important;
        }
        .van-nav-bar__content{
            height: 100%;
        }
        .van-icon{
            color: #fff;
        }
    }
}
</style>